<template>
  <div>
    <v-panel-top>
      <el-button type="primary" @click="showAppendDialog({},0)">添加</el-button>
    </v-panel-top>
    <div class="menu">
      <el-tree
        :data="menus"
        node-key="id"
        :props="props"
        default-expand-all
        :expand-on-click-node="false">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div>{{ node.label }}</div>
          <div>
            <el-button v-if="node.level !==2" type="text" size="mini" @click="showAppendDialog(data,node.level)">添加
            </el-button>
            <el-button type="text" size="mini" @click="showUpdateDialog(data,node)">编辑</el-button>
            <el-button type="text" size="mini" @click="remove(data)">删除</el-button>
          </div>
        </div>
      </el-tree>
    </div>
    <v-plain-form
      ref="form-append-root"
      title="添加目录"
      confirmText="添加"
      :form="formRoot"
      :rules="rules"
      @confirm="confirmAppend"
    />
    <v-plain-form
      ref="form-append-menu"
      title="添加菜单"
      confirmText="添加"
      :form="formMenu"
      :rules="rulesMenu"
      @confirm="confirmAppend"
    />
    <v-plain-form
      ref="form-update-root"
      title="编辑目录"
      confirmText="修改"
      :form="formRoot"
      :rules="rules"
      @confirm="confirmUpdate"
    />
    <v-plain-form
      ref="form-update-menu"
      title="编辑菜单"
      confirmText="修改"
      :form="formMenu"
      :rules="rulesMenu"
      @confirm="confirmUpdate"
    />
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vPlainForm from '@/components/plain-form'
  import vPanelTop from '@/components/pannel-top'

  @Component({
    components: {
      vPanelTop,
      vPlainForm
    }
  })
  export default class Menu extends Vue {
    menus = []
    formRoot = {
      name: {
        value: '',
        label: '节点名称',
        placeholder: '请输入节点名称',
        type: 'input'
      },
      icon: {
        value: '',
        label: '图标',
        placeholder: '请选择图标',
        type: 'select',
        options: [
          {
            value: 'icon-piaojufuwu',
            label: '票据服务',
          },
          {
            value: 'icon-jiaoyiguanli',
            label: '交易管理',
          },
          {
            value: 'icon-nav-system-set',
            label: '系统管理',
          }
        ]
      },
      url: {
        value: '',
        label: '菜单名称',
        placeholder: '请输入菜单名称',
        type: 'select',
        options: [
          {
            label: '平台管理',
            value: '/platform'
          },
          {
            label: '交易管理',
            value: '/transaction'
          },
          {
            label: '系统管理',
            value: '/system'
          },
        ]
      }
    }
    rules = {
      'name.value': [
        {required: true, message: '请输入节点名称', trigger: 'change'}
      ],
      'icon.value': [
        {required: true, message: '请选择图标', trigger: 'change'}
      ]
    }
    formMenu = {
      name: {
        value: '',
        label: '节点名称',
        placeholder: '请输入节点名称',
        type: 'input'
      },
      url: {
        value: '',
        label: '菜单名称',
        placeholder: '请输入菜单名称',
        type: 'select',
        options: [
          {
            label: '渠道专员管理',
            value: '/platform/channel-commissioner'
          },
          {
            label: '渠道商管理',
            value: '/platform/channel-provider'
          },
          {
            label: '会员管理',
            value: '/platform/member'
          },
          {
            label: '业务员管理',
            value: '/platform/salesmen'
          },
          {
            label: '票据库存',
            value: '/transaction/inventory',
          },
          {
            label: '询价管理',
            value: '/transaction/offer',
          },
          {
            label: '订单管理',
            value: '/transaction/order',
          },
          {
            label: '用户管理',
            value: '/system/user',
          },
          {
            label: '角色管理',
            value: '/system/role',
          },
          {
            label: '菜单管理',
            value: '/system/menu',
          },
        ]
      }
    }
    rulesMenu = {
      'name.value': [
        {required: true, message: '请输入菜单名称', trigger: 'change'}
      ],
      'url.value': [
        {required: true, message: '请选择菜单', trigger: 'change'}
      ]
    }

    props = {
      children: 'menuDtos',
      label: 'name'
    }

    /**
     * 展示添加操作弹层
     * @data
     * @level
     **/
    showAppendDialog (data, level) {
      switch (level) {
        case 0 :
          this.appendRoot(data, level)
          return
        case 1:
          this.appendMenu(data, level)
          return
        case 2:
          this.appendRole(data, level)
      }
    }

    showUpdateDialog (data, {level}) {
      switch (level) {
        case 1 :
          this.updateRoot(data, level)
          return
        case 2:
          this.updateMenu(data, level)
          return
        case 3:
          this.updateRole(data, level)
      }
    }

    /**
     * 添加根节点弹窗
     */
    appendRoot (data, level) {
      this.$refs['form-append-root'].openDialog({
        parentId: 0,
        name: '',
        type: level,
        url: data.url
      })
    }

    appendMenu (data, level) {
      this.$refs['form-append-menu'].openDialog({
        parentId: data.id,
        name: '',
        url: '',
        type: level
      })
    }

    appendRole (data, level) {
      //todo
    }

    updateRoot (data, level) {
      this.$refs['form-update-root'].openDialog({
        id: data.id,
        name: data.name,
        icon: data.icon,
        type: level - 1,
        url: data.url
      })
    }

    updateMenu (data, level) {
      this.$refs['form-update-menu'].openDialog({
        id: data.id,
        name: data.name,
        url: data.url,
        type: level - 1
      })
    }

    updateRole (data, level) {
      //todo
    }

    async confirmAppend (form) {
      let res: AjaxResponse = await this.$axios.post('b/boms/menu/add', form)
      this.getMenus()
      this.$utils.tips(res)
    }

    async confirmUpdate (form) {
      let res: AjaxResponse = await this.$axios.put('b/boms/menu/update', form)
      this.getMenus()
      this.$utils.tips(res)
    }

    /**
     * 删除节点
     * @param data 当前节点
     */
    async remove (data) {
      try {
        await this.$confirm('此操作将永久删除该节点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res: AjaxResponse = await this.$axios.delete(`b/boms/menu/delete/${data.id}`)
        this.getMenus()
        this.$utils.tips(res)
      } catch (e) {

      }
    }

    /**
     * 获取节点树
     */
    async getMenus () {
      let res: AjaxResponse = await this.$axios('b/boms/menu/menus')
      if (res.responseCode === 200) {
        this.menus = res.data
      }
    }

    mounted () {
      this.getMenus()
    }
  }
</script>

<style lang="less" scoped>
  .menu {
    width: 400px;
    margin-top: 10px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
  }
</style>
